@import '@/styles/utils.scss';
@import '@/styles/colors.scss';

.confirm {
  width: 100%;
  background-color: white;

  .content {
    padding: px2rem(20) 0;
    .contact {
      margin-top: px2rem(40);
    }
    .order {
      margin-top: px2rem(20);
      border: 1px solid #e8e8e8;

      .header {
        padding-left: px2rem(21);
        background-color: #f5f5f5;
        height: px2rem(42);
        box-sizing: border-box;
        border-bottom: 1px solid #e8e8e8;
        font-size: px2rem(14);
        line-height: px2rem(42);
        color: #999;
        display: flex;

        .header__product {
        }
        .header__price {
          margin-left: px2rem(380);
        }
        .header__quantity {
          margin-left: px2rem(160);
        }
        .header__sum {
          margin-left: px2rem(160);
        }
        .header__final {
          margin-left: px2rem(160);
        }
      }
    }

    .footer {
      display: flex;
      flex-direction: column;
      background-color: #f5f5f5;
      border-left: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      padding: px2rem(20) px2rem(40) px2rem(40) px2rem(30);
      .footer__row {
        display: flex;
        justify-content: space-between;
      }

      .invoice {
        display: flex;
        flex-direction: column;

        .invoice__title {
          line-height: px2rem(14);
          font-size: px2rem(14);
          color: #666;
        }
        .invoice__content {
          margin-top: px2rem(14);
          display: flex;
          align-items: center;

          .invoice__text {
            margin-left: px2rem(8);
            line-height: px2rem(14);
            font-size: px2rem(14);
            color: #666;
          }
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        font-size: px2rem(14);
        line-height: px2rem(14);
        margin-bottom: px2rem(20);

        .info__row {
          display: flex;
          justify-content: flex-end;
          margin-top: px2rem(20);

          &:first-child {
            margin-top: 0;
          }

          .info__text {
            width: px2rem(160);
            text-align: right;
          }
        }
      }

      .control {
        margin-left: auto;
        border-top: 1px solid #e8e8e8;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: px2rem(280);
        padding-top: px2rem(32);

        .sum {
          display: flex;
          justify-content: flex-end;
          align-items: flex-end;
          .sum__title {
            font-size: px2rem(14);
            line-height: px2rem(14);
          }
          .sum__text {
            width: px2rem(100);
            font-weight: 700;
            color: #d4282d;
            font-size: px2rem(20);
            line-height: px2rem(20);
            text-align: right;
          }
        }

        .buy {
          margin-top: px2rem(20);
          width: px2rem(168);
          height: px2rem(50);
          line-height: px2rem(50);
          font-size: px2rem(18);
        }
      }
    }
  }
}
